<template>
<el-row :gutter="4" style="overflow-x:hidden padding-bottom:60px">
<el-col :span="24">
<div class="grid-content height_div">
<el-button style="margin-left:-2px;margin-top:12px" :loading="searchLoading" @click="showDialog"><i class="el-icon-plus add"></i>添加</el-button>
<el-button style="margin-top:12px" :loading="searchLoading" @click="updateDictionaryInfo()"><i class="el-icon-plus add"></i>修改</el-button>
<el-button
type="warning"
@click="delDictionaryInfo()">删除</el-button>
</div>
</el-col>

<el-col :span="24" class="main-table">
<span class="show-tree">
<el-tree
  :data="regions"
  :props="props"
  :load="loadNode"
  check-strictly=true
  lazy=''
  accordion
  @node-click="handleNodeClick">
</el-tree>
</span>
</el-col>
<div v-if="dialogS">
<el-dialog
:title="addDictionany?'添加':'修改'"
:visible.sync="dialogS"
size="tiny"
:before-close="handleClose">

<div class="department" v-if="addDictionany">
<el-form :label-position="labelPosition" ref="formVinDiction" :rules="rules" label-width="80px" :model="formVinDiction">
<el-form-item label="类目名称" prop="cateName">
<el-input v-model="formVinDiction.cateName" placeholder="请输入类目名称"></el-input>
</el-form-item>

<el-form-item label="上级类目" prop="parentId">
<span @click.stop="taggleBox" class="el-cascader" :class="isOpen?'is-opened':'none'" style="width:100%">
<div class="el-input">
<i class="el-input__icon el-icon-caret-bottom" :class="isOpen?'is-reverse':'none'"></i>
<input v-model="nameTree" autocomplete="off" placeholder="选择类目" readonly="readonly" type="text" rows="2" class="el-input__inner">
</div><span class="el-cascader__label"></span></span>
</el-form-item>
</el-form>

<!--这里的级联遇到卡顿、坑；现在用树来做你如果有想到方法可以另写的-->
<div v-if="isOpen4" @mouseleave="isOpen4 = false" ref="cascaderBox" class="el-cascader-menus1 showBox" style="position: absolute; top: 178px; left: 100px; transform-origin: center top 0px; z-index: 9999;" >
 <el-tree
  :data="regions3"
  :props="props2"
  :load="loadNode2"
  check-strictly=true
  lazy
  accordion
  @node-click="handleNodeClick1">
</el-tree>
</div>
</div>


<div v-if="updateDictionany">
<el-form :label-position="labelPosition" ref="formVinDiction" :rules="rules" label-width="80px" :model="updateData">

<el-form-item label="类目名称" prop="positionName">
<el-input v-model="updateData.departmentInfo.cateName" placeholder="请输入类目名称"></el-input>
</el-form-item>
<el-form-item label="上级类目" prop="parentId">
<span @click="taggleBox1" class="el-cascader" :class="isOpen1?'is-opened':'none'" style="width:100%">
<div class="el-input">
<i class="el-input__icon el-icon-caret-bottom" :class="isOpen1?'is-reverse':'none'"></i>
<input v-model="backShowName" autocomplete="off" placeholder="请选择" readonly="readonly" type="text" rows="2" class="el-input__inner">
</div><span class="el-cascader__label"></span></span>

</el-form-item>
</el-form>

<div v-if="isOpen1" @mouseleave="isOpen1 = false" ref="cascaderBox" class="el-cascader-menus1 showBox" style="position: absolute; top: 230px; left: 100px; transform-origin: center top 0px; z-index: 9999;" >
 <el-tree
  :data="regions4"
  :props="props3"
  :load="loadNode3"
  lazy
  accordion
  @node-click="handleNodeClick1">
</el-tree>
</div>
</div>


<el-col class='addButton1' v-if="updateDictionany" style="margin-top:8px">
<el-button style="margin-right:50px" class="addButton_a" @click="dialogS = false">取 消</el-button>
<el-button type="warning" class="addButton_a" :loading='addLoading'  @click="confirmUpdate()">保 存</el-button>
</el-col>

<el-col class='addButton1' v-if="addDictionany" style="margin-top:8px">
<el-button style="margin-right:50px" class="addButton_a" @click="dialogS = false">取 消</el-button>
<el-button type="warning" class="addButton_a" :loading='addLoading'  @click="addDictionaryInfo('formVinDiction')">保 存</el-button>
</el-col>

</el-dialog>
</div>

</el-row>
</template>

<script>
import {mapState, mapMutations} from 'vuex'  
export default {
data() {
return {
isOpen4:false,
isOpen1:false,
count3:0,
count:0,
count2:0,
levelArr1:[],
cateName:'',
nameTree:'',
postId:'',


updateDictionany:false,
refleshLoading:false,
addDictionany:false,
tableLoading:false,
updateData:[],
opitions:[],
opitions1:[],
total:'',
labelPosition:'left',
input:'',
input1:'',
tpmPara:{},
tableData:[],
dialogS:false,
addLoading:false,
updateLoading:false,
delLoading:false,
url:'/api/product/getCate',
url4:'/api/product/creatCate',
formVinDiction:{
superId:'',
cateName:''
},
updateData:{
departmentInfo:{
  id:'',
  cateName:'',
  parentId:'',
  description:''
  },
  depEmpMiddle:{
  depId:'',
  cateName:'',
  depIdTrace:''
  }
},
regions: [],
regions1:[],
regions3:[],
regions4:[],
props: {
    label: 'name',
    children: 'f'
},
props1: {
    label: 'name',
    children: 'f'
},
props2: {
    label: 'name',
    children: 'zones'
},
rules: {
positionName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }]
}
}
},
computed: {
...mapState(['opition','pageTpm']),
},
methods: {
...mapMutations(['DELETE_ITEM','ADD_ITEM','CHANGEISIN']),
//显示添加框
showDialog(){
this.isOpen4=false;
this.isOpen2=false;
this.getDepTree(this.tpmPara);
this.addDictionany=true;
this.updateDictionany=false;
this.dialogS=true;
this.isOpen=false;
this.nameTree='';
},
//修改功能
updateDictionaryInfo(){

if(!this.parentId1.id){
this.$notify({
title: '提示',
message:'请选择需要修改的部门',
type: 'info'
});
return;
};

this.formVinDiction={
description:'',
parentId:'',
cateName:''
}
this.dialogS=true;
this.addDictionany=false;
this.updateDictionany =true;
this.isOpen1=false;
},
confirmUpdate(){
this.post(this.url8,this.updateData).then((m)=>{
if(m.data.result){
this.updateLoading=false;
this.dialogS=false;
this.$notify({
title: '提示',
message: m.data.msg,
type: 'success'
});
this.dialogS=false;
this.getEmployeeList(this.tpmPara);
this.getDepTree(this.tpmPara);
this.updateData={
departmentInfo:{
  id:'',
  cateName:'',
  parentId:'',
  description:''
  },
  depEmpMiddle:{
  depId:'',
  cateName:'',
  depIdTrace:''
  }
}
}
if(!m.data.result){
this.$notify({
title: '提示',
message:m.data.msg ,
type: 'warning'
});
}
}).catch((m)=>{
this.addLoading=false;
this.$notify({
title: '提示',
message: ''+ m.data.msg,
type: 'warning'
});
})
},
//删除功能
delDictionaryInfo(){
let tpm = {};
tpm.departmentId=this.parentId1.id;
this.delLoading=true;
this.$confirm('是否删除该部门?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.get(this.url9,tpm).then((m)=>{
if(m.data.result){
this.parentId1='';
this.delLoading=false;
this.$notify({
title: '提示',
message: m.data.msg,
type: 'success'
});
this.getEmployeeList(this.tpmPara);
this.getDepTree(this.tpmPara);
}
if(!m.data.result){
this.$notify({
title: '提示',
message:m.data.msg ,
type: 'warning'
});
}
})})
},
//添加功能
addDictionaryInfo(formVinDiction){
this.$refs[formVinDiction].validate((valid)=>{
if(valid){
this.addLoading=true;
this.get(this.url4,this.formVinDiction).then((m)=>{
if(m.data.code===200){
this.dialogS=false;
this.addLoading=false;
this.$notify({
title: '提示',
message: m.data.msg,
type: 'success'
});
this.formVinDiction={
cateName:'',
menuCode:''
};
if(this.total%10==0){this.tpmPara.pageIndex+=1;}
this.getEmployeeList(this.tpmPara);
}
if(!m.data.result){
this.addLoading=false;
this.$notify({
title: '提示',
message:m.data.msg ,
type: 'warning'
});
}
}).catch((m)=>{
this.addLoading=false;
this.$notify({
title: '提示',
message: ''+ m.data.msg,
type: 'warning'
});
})
}})
},
//点击级联选项
handleNodeClick(data,node,domTree) {//这里是dialog对话框的树点击事件，增加和修改为同一事件
this.isShowSign=true;//这里是验证不为空，因为要异步取值；所以内置的验证不管用
this.showSign=false;
let tpmDom=domTree.$el.querySelector('.el-tree-node__expand-icon');
try{
if(q.style.display==='none'){
tpmDom.style.display="none";
};
}catch(e){};
let tpm='';
let tpmID='';
this.nameDepartment=data.name;
console.log(data);
this.depIdOut=data.id;
if(this.isOutDepID){this.searchDepData=data.id};
this.levelArr1[node.level-1]=data;

for(let i=0;i<node.level;i++){
  tpm+=(this.levelArr1[i]['name']+'/')
  tpmID+=(this.levelArr1[i]['id']+',')
}
let len1=tpmID.length;
let len2=tpm.length;
tpmID=tpmID.substr(0,len1-1);
tpm=tpm.substr(0,len2-1);
this.nameTree=tpm;
this.depIdTrace1=tpmID;
this.backShowName=tpm;
this.formVinDiction.parentId=data.id;
this.updateData.depEmpMiddle.depIdTrace=this.depIdTrace1;
this.ruleForm1.cateName=tpm;
},
handleNodeClick1(data,node,domTree) {//这里是dialog对话框的树点击事件，增加和修改为同一事件
console.log(data);
console.log(node)
//this.isShowSign=true;//这里是验证不为空，因为要异步取值；所以内置的验证不管用
//this.showSign=false;
let tpm='';
let tpmID='';
console.log(node.level)
this.levelArr1[node.level-1]=data;
console.log(data);
for(let i=0;i<node.level;i++){
  tpm+=(this.levelArr1[i]['name']+'/')
  tpmID+=(this.levelArr1[i]['id']+',')
}
let len1=tpmID.length;
let len2=tpm.length;
tpmID=tpmID.substr(0,len1-1);
tpm=tpm.substr(0,len2-1);
console.log(tpm);
this.nameTree=tpm;

this.depIdTrace1=tpmID;
this.backShowName=tpm;
this.formVinDiction.superId=data.id;
this.updateData.depEmpMiddle.depIdTrace=this.depIdTrace1;
//this.ruleForm1.cateName=tpm;

},
//获取树形列表
getDepTree(pageTpm1) {
this.get(this.url,pageTpm1).then((m)=>{
console.log(m);
if(m.data.code===200){
let tpmData=m.data.shopCategories;

let tpmData1=[];
for(let i=0;i<tpmData.length;i++){
  tpmData1[i]={};
  tpmData1[i]["name"]=''+tpmData[i]["catename"];
  tpmData1[i]["id"]=tpmData[i]["cateid"];
  tpmData1[i]["issuper"]=tpmData[i]["issuper"];
}
this.regions =tpmData1;
console.log(this.regions);
console.log(tpmData1);
this.regions2=tpmData1;
this.regions3=tpmData1;
this.regions4=tpmData1;
this.regions5=tpmData1;
}
}).catch((m)=>{
console.log(m);
})
},
//获取树形列表1
getDepTree1(para,fn) {
let tpm='';
let tpm1='';
this.get(this.url,para).then((m)=>{
if(m.data.code===200){
let tpmData=m.data.shopCategories;
let tpmData1=[];

for(let i=0;i<tpmData.length;i++){
  tpmData1[i]={};
  tpmData1[i]["name"]=''+tpmData[i]["catename"];
  tpmData1[i]["id"]=tpmData[i]["cateid"];
  tpmData1[i]["issuper"]=tpmData[i]["issuper"];
}
this.regions1 = tpmData1;
if(tpmData1.length===0){this.regions1=[];return};
fn(this.regions1);
}
}).catch((m)=>{
console.log(m);
})
},
taggleBox() {
  //this.count =1;
  this.count1=1;
  this.count2=1;
  this.count3=1;
  this.count4=1;
  this.isOutDepID=false;
  this.isOpen4=!this.isOpen4;
  if(this.isOpen4){this.getDepTree(this.pageTpm1)}
},
//增加树形节点 
loadNode(node, resolve) {
    //let para = {parentId:node.data.id}
    //if(this.count===1){this.count++;return};
    //this.getDepTree1(para,resolve);
    //this.count++;
    //这里这样写的原因是没有子项,可以去掉三角符号;这是elmment-ui的bug
    //cosole.log(node);

    let para = {cateid:node.data.id};

    //if(this.count===1){this.count++;return};
    this.get(this.url,para).then((m)=>{

    if(m.data.code===200){
    let tpmData=m.data.shopCategories;
    let tpmData1=[];
    for(let i=0;i<tpmData.length;i++){
      tpmData1[i]={};
      tpmData1[i]["name"]=tpmData[i]["catename"];
      tpmData1[i]["id"]=tpmData[i]["cateid"];
      tpmData1[i]["issuper"]=tpmData[i]["issuper"];
    }
    this.regions1 = tpmData1;
    this.count++;
    if(tpmData1.length===0){resolve([]);return};

    resolve(tpmData1);
    }
    });
},
loadNode2(node, resolve) {
    let para = {cateid:node.data.id}
    if(this.count2===1){this.count2++};
    this.getDepTree1(para,resolve);
    this.count2++;
},
loadNode3(node, resolve) {
    let para = {cateid:node.data.id}
    //if(this.count3===1){this.count2++;return};
    this.getDepTree1(para,resolve);
    this.count3++;
},
//获取数据
getCategoryList(pageTpm) {
this.get(this.url,pageTpm).then((m)=>{
if(m.data.code===200){

this.searchLoading=false;
this.tableLoading=false;
this.tableData=m.data.data.list;
this.total=m.data.data.totalCount;
}
}).catch((m)=>{
console.log(m);
})
},
},
mounted() {
this.tableLoading=true;
//初始化
let pageTpm={

};
this.tpmPara=pageTpm;
this.getDepTree(pageTpm);
//this.getCategoryList(pageTpm);
this.opitions=[{positionName:' ',context:'选择全部'}]
let pageTpm1={
pageIndex:1,
pageSize:10,
menuName:''
}
//this.getMenuDetailList(this.tpmPara)
//this.getMenuList()
}
}
</script>

<style lang="scss" scoped> 
.show-tree{width:100%;background:#fff;display:block!important;height:512px;border: 1px solid #c8c8c8;box-sizing:border-box;}
.dialog-add{}
.clear_block{display:block!important;}
.grid-content{color:#F9FAFC}
.grid-content1{background:#57c8f2}
.grid-content2{background:#6ccac9}
.grid-content3{background:#f8d347}
.grid-content4{background:#ff6c60}
.grid-content5{background:#a9d96c}
.grid-content6{background:#3ecabf}
.grid-content7{text-align:center;border:1px solid #eaeefb;color:#48576a;background:none}
.left-content{text-align:left;color:#F7BA2A}
.left-content p{margin:4px 0;color:#f47915}
.bg-purple-light {
background: #e5e9f2;
}
</style>